/* 
 *  @module Javascript Template [All]
 *  Author: Alex Hu
 *
 */

'use strict';

GML.Template = (function(){

    var M = {};

    M.tube = [];

    M.tube["manage-product"] = function(curLabel){
        var story, i, labelName, item, ownedLabel, is_cur_label, colspan, TD, NO
            , tabContent = ""
            , productURL = GML.URL.product + "/gmvo/product/manage.gm?label="
            , labelPool = [
                { 
                    key: "online",
                    name: T(222)
                },
                {
                    key: "offline",
                    name: T(144)
                },
                {
                    key: "unapproved",
                    name: T(141)
                }
            ]
            , ownedLabel = ""
            ;

        var printBtn = function(btnConfig){
            var i
                , select = ""
                , custom = btnConfig.custom || []
                , customAttr = ""
                ;

            if(btnConfig.type === "select"){
                select = '<i class="triangle-d"></i>';
            }
            for(i=0; i<custom.length; i++){
                item = custom[i];
                customAttr += " " + item.key + '="' + item.value + '"';
            }
            return [
                '<div class="item-opt">',
                    '<a href="javascript:;" class="' + btnConfig.className + '" role="' + btnConfig.role + '"' + customAttr + '><span>' + btnConfig.name + '</span>' + select + '</a>',
                '</div>'
            ].join("");
        }

        var printContent = function(labelName){
            var filter, actionGroup, action, colgroup, TH
                , product_type_select = ""
                , directorFilter = ""
                , is_cur_content = "hide"
                , addition = ""
                , pickAll = [
                    '<div class="inq-op">',
                        '<a href="javascript:;" class="bg-icon ico-chk" id="pickAll_' + labelName + '_MSG">all</a>',
                    '</div>',
                ].join("")
                ;

            switch(labelName){
                case "online":
                    addition += '';
                    directorFilter = "";
                    /*
                    [
                        '<div class="select-box sel-bosshead">',
                            '<div class="txt" role="mole-s" data-name="contactId" data-t="assign-director-select" data-scope="filter"><a href="javascript:;"></a><em>负责人</em></div>',
                        '</div>'
                    ].join("");
                    product_type_select = [
                        '<div class="select-box sel-bosshead">',
                            '<div class="txt" role="mole-s" data-name="productType" data-t="product-type-select"><a href="javascript:;"></a><em>' + T(228) + '</em></div>',
                        '</div>'
                    ].join("");
                    */
                    actionGroup = [
                        printBtn({
                            className: "btn-s6",
                            role: "offline-G-MSG",
                            name: "offline"
                        }),
                        printBtn({
                            className: "btn-s6",
                            role: "del-G-MSG",
                            name: "delete"
                        }),
                        printBtn({
                            type: "select",
                            className: "btn-s6 btn-s6-v",
                            role: "mole",
                            name: "assign",
                            custom: [
                                {
                                    key: "data-t",
                                    value: "assign-director-select"
                                },
                                {
                                    key: "data-scope",
                                    value: "group"
                                }
                            ]
                        }),
                        printBtn({
                            type: "select",
                            className: "btn-s6 btn-s6-v",
                            name: "product type",
                            role: "mole",
                            custom: [
                                {
                                    key: "data-t",
                                    value: "product-type-mark-select"
                                }
                            ]
                        })
                    ].join("");
                    colgroup = [
                        '<col class="w40" />',
                        '<col class="w110" />',
                        '<col />',
                        '<col class="w90" />',
                        '<col class="w90" />',
                        '<col class="w120" />',
                        '<col class="w80" />'
                    ].join("");
                    TH = [
                        '<th><div class="th-gap"></div></th>',
                        '<th><div class="th-gap">image</div></th>',
                        '<th><div class="th-gap">name</div></th>',
                        '<th><div class="th-gap">type</div></th>',
                        '<th><div class="th-gap">update</div></th>',
                        '<th><div class="th-gap">director</div></th>',
                        '<th><div class="th-gap">action</div></th>'
                    ].join("");
                    colspan = 7;
                    break;
                case "offline":
                    actionGroup = [
                        printBtn({
                            className: "btn-s6",
                            role: "online-G-MSG",
                            name: "online"
                        }),
                        printBtn({
                            className: "btn-s6",
                            role: "del-G-MSG",
                            name: "delete"
                        })
                    ].join("");
                    colgroup = [
                        '<col class="w40" />',
                        '<col class="w120" />',
                        '<col />',
                        '<col class="w90" />',
                        '<col class="w100" />',
                    ].join("");
                    TH = [
                        '<th><div class="th-gap"></div></th>',
                        '<th><div class="th-gap">image</div></th>',
                        '<th><div class="th-gap">name</div></th>',
                        '<th><div class="th-gap">update</div></th>',
                        '<th><div class="th-gap">action</div></th>'
                    ].join("");
                    colspan = 5;
                    break;
                case "unapproved":
                    actionGroup = [
                        printBtn({
                            className: "btn-s6",
                            role: "btn-s6",
                            name: "delete"
                        })
                    ].join("");
                    colgroup = [
                        '<col class="w40" />',
                        '<col class="w110" />',
                        '<col />',
                        '<col class="w90" />',
                        '<col class="w90" />',
                        '<col class="w100" />',
                    ].join("");
                    TH = [
                        '<th><div class="th-gap"></div></th>',
                        '<th><div class="th-gap">image</div></th>',
                        '<th><div class="th-gap">name</div></th>',
                        '<th><div class="th-gap">note</div></th>',
                        '<th><div class="th-gap">update</div></th>',
                        '<th><div class="th-gap">action</div></th>'
                    ].join("");
                    colspan = 6;
                    break;
                case "auditing":
                    actionGroup = "";
                    colgroup = [
                        '<col class="w120" />',
                        '<col />',
                        '<col class="w90" />',
                        '<col class="w40" />'
                    ].join("");
                    TH = [
                        '<th><div class="th-gap">image</div></th>',
                        '<th><div class="th-gap">name</div></th>',
                        '<th><div class="th-gap">update</div></th>',
                        '<th><div class="th-gap">action</div></th>'
                    ].join("");
                    colspan = 4;
                    pickAll = "";
                    break;
                case "deleted":
                    actionGroup = "";
                    colgroup = [
                        '<col class="w120" />',
                        '<col />',
                        '<col class="w100" />',
                        '<col class="w120" />',
                        '<col class="w60" />'
                    ].join("");
                    TH = [
                        '<th><div class="th-gap">image</div></th>',
                        '<th><div class="th-gap">name</div></th>',
                        '<th><div class="th-gap">delete time</div></th>',
                        '<th><div class="th-gap">director</div></th>',
                        '<th><div class="th-gap">action</div></th>'
                    ].join("");
                    colspan = 5;
                    pickAll = "";
                    break;
            }

            filter = [
                '<form id="filter_' + labelName + '_MSG">',
                    '<div class="mod-filter">',
                        '<div class="fil-sel clear">',
                            directorFilter,
                            product_type_select,
                            '<div class="select-box sel-categories">',
                                '<div class="txt" role="mole-s" data-name="leafCatId" data-t="class-reader-buyinglead"><a href="javascript:;"></a><em>----all categories----</em></div>',
                            '</div>',
                            '<div class="search-s2">',
                                '<span class="bg-icon ico-search"></span>',
                                '<input type="text" class="txt" name="searchContent" placeholder="search">',
                            '</div>',
                        '</div>',
                        '<div class="actions">',
                            '<span class="brace"></span>',
                            '<a href="javascript:;" class="btn-s1" role="filter-MSG"><span>ok</span></a>',
                        '</div>',
                    '</div>',
                '</form>'
            ].join("");

            TD = '<td colspan="' + colspan + '"><br /><br /><br /><br /></td>';

            action = [
                '<div class="opt-area clear">',
                    '<div class="op-tips hide" id="notice_' + labelName + '_MSG"></div>',
                    '<div class="pagination-tbl clear">',
                        '<div class="page-wrap">',
                            '<ul class="page" id="pageNavS_' + labelName + '_MSG"></ul>',
                        '</div>',
                    '</div>',
                    pickAll,
                    '<div class="actions">',
                        actionGroup,
                    '</div>',
                '</div>'
            ].join("");

            if(is_cur_label){
                is_cur_content = "";
            }
            return [
                '<div role="bossMSG" id="boss_' + labelName + '_MSG" class="' + is_cur_content + '">',
                    addition,
                    filter,
                    action,
                    '<table class="mod-table product-list" cellpadding="0" cellspacing="0">',
                        '<colgroup>',
                            colgroup,
                        '</colgroup>',
                        '<thead>',
                            '<tr>',
                                TH,
                            '</tr>',
                        '</thead>',
                        '<tbody id="bodyTable_' + labelName + '_MSG">',
                            TD,
                        '</tbody>',
                    '</table>',
                    '<div class="opt-area clear">',
                        '<div class="pagination-tbl clear" id="pageNav_' + labelName + '_MSG"></div>',
                    '</div>',
                '</div>'
            ].join("");
        }

        for(i=0; i<labelPool.length; i++){
            is_cur_label = "";
            // labelName = labelList[i];
            item = labelPool[i].key;
            console.log(item);
            console.log(curLabel);

            if(curLabel === item){
                is_cur_label = " cur";
            }
            // NO = labelName === "unapproved" ? '<strong class="no"></strong>' : '<i class="no"></i>';
            ownedLabel += '<span class="label' + is_cur_label + '" role="tab" id="' + labelName + '_tab" data-label="' + labelName + '">' + item + '</span>';

            tabContent += printContent(item, is_cur_label);
        }

        story = [
            '<div class="title-s1"><h3>Tab Sample</h3></div>',
            '<div role="tabMD">',
                '<div class="tab-s2">',
                    '<div class="tab-list" id="tabList">',
                        ownedLabel,
                    '</div>',
                '</div>',
                '<div role="tabContent">',
                    tabContent,
                '</div>',
            '</div>'
        ];

        return story.join("");
    }

    return M;

})();


